<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        width: 200px;
        height: 200px;
        position: absolute;
        overflow: scroll;
        -webkit-perspective: 100px;
        -webkit-transform-style: preserve-3d;
    }

    .child {
        position: absolute;
        top: 65px;
        width: 60px;
        height: 200px;
    }

    .first {
        left: 0px;
        background-color: green;
        transform: translateZ(10px);
    }

    .second {
        left: 65px;
        background-color: blue;
        transform: translateZ(20px);
    }
</style>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    if (window.internals) {
        internals.settings.setPreferCompositingToLCDTextEnabled(true);
    }

    function runTest() {
        var pre = document.createElement('pre');
        if (!window.internals) {
            var description = "This test ensures that the accelerated overflow "
                + "scrolling machinery is not invoked for the body element.";
            pre.innerHTML = description;
        } else {
            document.body.offsetTop;
            pre.innerHTML = internals.layerTreeAsText(document);
        }
        document.body.appendChild(pre);
    }
    window.onload = runTest;
</script>
</head>
<body>
  <div class="container">
    <div class="child first"> </div>
    <div class="child second"> </div>
  </div>
</body>
</html>
